<template>
  <div class="m-header">
    <div class="m-warn"></div>
    <div class="m-icon"></div>
    <h1 class="m-text">YOYO Music</h1>
    <router-link tag="div" class="m-mine" to="/user">
      <i class="icon-mine" />
    </router-link>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="stylus" scoped>
  @import '~@/common/style/variable'
  @import "~@/common/style/mixin"
  .m-header
    color $color-theme
    position relative
    height 44px
    text-align center
    font-size 0
    .m-warn
      bg-image('warn')
      width 25px
      height: 28px
      position absolute
      left: 9px
      top: 7px
      background-size 25px 28px
    .m-icon
      display inline-block
      vertical-align top
      margin-top 6px
      width 30px
      height: 32px
      bg-image('logo')
      margin-right 9px
      background-size 30px 32px
    .m-text
      display inline-block
      vertical-align top
      line-height 44px
      margin 0
      font-size $font-size-large
      font-weight 400
    .m-mine
      position absolute
      top 0
      right: 0
      .icon-mine
        display block
        padding 12px
        font-size 20px
        color $color-theme
</style>
